<!--  -->
<template>
  <div class="message">
    <NavBar :title="'消息订阅'" :text="''" :cityName="''"     :SeveralMenus="'1'"></NavBar>
    <div class="main">
      <div class="user">用户名:{{ userName }}</div>
      <div class="user messageType">消息类型</div>
      <div class="publicColor">
        <van-checkbox-group v-model="radio" direction="horizontal">
          <van-checkbox name="预报" shape="square">预报</van-checkbox>
          <van-checkbox name="预警" shape="square">预警</van-checkbox>
        </van-checkbox-group>
      </div>
      <div class="user subscribe">订阅要素</div>
      <div class="subscribeSun">
        <div
          class="publicColor subscribeYs"
          v-for="item in element1"
          :key="item.name"
        >
          <van-checkbox-group v-model="radio1" direction="horizontal">
            <van-checkbox :name="item.text" shape="square">{{
              item.text
            }}</van-checkbox>
          </van-checkbox-group>
        </div>
      </div>
      <div class="user location">订阅位置</div>
      <div class="locationSun">
        <img class="img1" src="../assets/message/dingwei.png" alt="" />
        <van-field
          v-model="dlweizhi"
          name="地理位置"
          placeholder="自定义订阅名称"
        />
        <div class="btn">
          <van-button
            type="info"
            style="float: right; margin-right: 68px; margin-top: 10px"
            @click="clickWz"
            >设施位置</van-button
          >
        </div>
        <!-- <img class="img2" src="../assets/message/weizhi.png" alt="" />
        <van-field v-model="sheshi" name="设施位置" placeholder="设施位置" /> -->
      </div>
      <!-- <van-button
          type="info"
          style="float: left;margin-top: 10px;"
          @click="clickWz"
          >地理位置</van-button
        > -->
      <!-- <div class="btn">
      

        <van-button
          type="info"
          style="float: right;margin-right: 68px;margin-top: 10px;"
          @click="clickWz"
          >设施位置</van-button
        >
      </div> -->
      <div class="user Warninglevel">预警等级</div>
      <div class="WarninglevelSun">
        <van-cell is-link :title="action" @click="show = true" />
        <van-action-sheet
          v-model="show"
          :actions="actions"
          @select="onSelect"
        />
      </div>
      <div class="user messageType">消息状态</div>
      <div class="publicColor">
        <van-radio-group v-model="radio3" direction="horizontal">
          <van-radio name="开启">开启</van-radio>
          <van-radio name="关闭">关闭</van-radio>
        </van-radio-group>
      </div>
      <div class="bottom">
        <van-button type="primary" block @click="Submit">确定</van-button>
      </div>
    </div>
    <comArea
      v-if="showArea"
      @closeEmit="closeAreaMet"
      @confirmEmit="confirmEmitMet"
      :arr="arr"
    >
    </comArea>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Vue from "vue";
import { Form, Field, Button, ActionSheet } from "vant";
import Message from "@/service/message.js";
import comArea from "@/components/common/area.vue";
import { getItem, setItem, removeItem } from "../util/storage.js";

Vue.use(Form);
Vue.use(Field);
Vue.use(Button);
Vue.use(ActionSheet);
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { comArea },
  data() {
    //这里存放数据
    return {
      radio: ["预报", "预警"],
      showArea: false,
      radio1: [],
      radio3: "开启",
      userName: "张星宇",
      show: false,
      actions: [{ name: "红色" }, { name: "蓝色" }, { name: "黄色" }],
      action: "红色",
      dlweizhi: "",
      sheshi: "",
      element: [
        {
          name: "1",
          text: "大风",
        },
        {
          name: "2",
          text: "暴雨",
        },
        {
          name: "3",
          text: "台风",
        },
        {
          name: "4",
          text: "暴雪",
        },
        {
          name: "5",
          text: "寒潮",
        },
        {
          name: "6",
          text: "沙尘暴",
        },
        {
          name: "7",
          text: "高温",
        },
        {
          name: "8",
          text: "干旱",
        },
        {
          name: "9",
          text: "雷电",
        },
        {
          name: "10",
          text: "冰雹",
        },
        {
          name: "11",
          text: "霜冻",
        },
        {
          name: "12",
          text: "大雾",
        },
        {
          name: "13",
          text: "霾",
        },
        {
          name: "14",
          text: "道路结冰",
        },
        {
          name: "15",
          text: "森林火险",
        },
        {
          name: "16",
          text: "雷雨大风",
        },
      ],
      forecast: [
        {
          name: "17",
          text: "温度",
        },
        {
          name: "18",
          text: "湿度",
        },
        {
          name: "19",
          text: "风",
        },
        {
          name: "20",
          text: "降雨",
        },
      ],
      element1: [],
      allList: [
        {
          name: "1",
          text: "温度",
        },
        {
          name: "2",
          text: "湿度",
        },
        {
          name: "3",
          text: "风",
        },
        {
          name: "4",
          text: "温度",
        },
        {
          name: "1",
          text: "大风",
        },
        {
          name: "2",
          text: "暴雨",
        },
        {
          name: "3",
          text: "台风",
        },
        {
          name: "4",
          text: "暴雪",
        },
        {
          name: "5",
          text: "寒潮",
        },
        {
          name: "6",
          text: "沙尘暴",
        },
        {
          name: "7",
          text: "高温",
        },
        {
          name: "8",
          text: "干旱",
        },
        {
          name: "9",
          text: "雷电",
        },
        {
          name: "10",
          text: "冰雹",
        },
        {
          name: "11",
          text: "霜冻",
        },
        {
          name: "12",
          text: "大雾",
        },
        {
          name: "13",
          text: "霾",
        },
        {
          name: "14",
          text: "道路结冰",
        },
        {
          name: "15",
          text: "森林火险",
        },
        {
          name: "16",
          text: "雷雨大风",
        },
      ],
      city: "",
      cnty: "",
      arr: [],
      type: "",
      type1: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    radio: {
      immediate: true,
      handler(val, old) {
        if (this.radio[0] == "预报" && this.radio.length != 2) {
          this.element1 = this.forecast;
        } else if (this.radio[0] == "预警" && this.radio.length != 2) {
          this.element1 = this.element;
        } else if (this.radio.length == 2) {
          this.element1 = this.forecast.concat(this.element);
        } else if (this.radio.length == 0) {
          this.element1 = [];
        }
      },
    },
  },

  //方法集合
  methods: {
    onClickLeft() {
      removeItem("element");
      this.$router.push("Home");
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起

      this.action = item.name;
      this.show = false;
    },
    clickWz() {
      var params = {
        pushSwitch: this.radio3,
        msgType: this.radio,
        forecastSubContent: this.radio1,
        // subscribeAreas: [
        //   {
        //     areasData: it.geometry.coordinates,
        //     areaLocation: it.properties.sbmc,
        //   },
        // ],
        areaLocation: this.dlweizhi,
        alarmLevel: this.action,
        userId:this.$store.getters.userid,
        userName: "张星宇",
      };
      this.$store.commit("setelement", params);

      this.$router.push({
        name: "power",
        params: {
          name: "power",
        },
      });
    },
    closeAreaMet() {
      this.showArea = false;
    },
    confirmEmitMet(value) {
      //   this.dlweizhi = value[1].name + value[2].name
      this.city = value[1].name;
      this.cnty = value[2].name;
      this.showArea = false;
    },
    Submit() {
      console.log(this.radio1);
      var a = this.$route.params.feature;
      //   console.log(this.$route.params.feature, '哥哥哥')
      var forecastSubContent = [];
      var alarmSubContent = [];
      this.radio1.forEach((it) => {
        this.forecast.forEach((is) => {
          if (it == is.text) {
            forecastSubContent.push(is.text);
          }
        });
      });
      this.radio1.forEach((it) => {
        this.element.forEach((is) => {
          if (it == is.text) {
            alarmSubContent.push(is.text);
          }
        });
      });
      //   forecastSubContent = forecastSubContent.join(',')
      //   alarmSubContent = alarmSubContent.join(',')
      //   var a = [
      //     [
      //       {
      //         geometry: {
      //           type: 'LineString',
      //           coordinates: [
      //             [112.58396869059652, 37.82117660634299],
      //             [112.58404274471104, 37.82103829135944],
      //           ],
      //         },
      //         type: 'Feature',
      //         properties: {
      //           ssxl: 693353,
      //           yxdw: '057252DF49B645E6E050007F01007437',
      //           ssdl: 1503504706,
      //           sbzlx: 20100000,
      //           ssdkx: 566177,
      //           georelation: '2,',
      //           sbid: 'R5WUeh3ytYmXd1OJUeWfpk',
      //           state_id: 92186906,
      //           oid: 1503504711,
      //           apptype: 3,
      //           ssds: '057252DF490D45E6E050007F01007437',
      //           bznr: '10kV840二营盘1号线',
      //           zdsblx: 20200000,
      //           qdsb: 1503504701,
      //           zdsb: 1503504703,
      //           qdsblx: 20300000,
      //           dydj: 22,
      //           sbmc:
      //             '10kV二营盘开关站8211煤科1号线-10kV煤科院配电室8181电缆中间接头001-10kV煤科院配电室8181',
      //         },
      //         id: 1503504711,
      //         layer: {
      //           id: 'psr_201000_0_2_0_0',
      //           type: 'line',
      //           source: 'tileExt_75791dca-3295-4309-8bd9-565e361b2e6f',
      //           'source-layer': 'psr_201000_0_2_0_0',
      //           metadata: {
      //             'maputnik:comment': '站外-电缆段',
      //           },
      //           minzoom: 16,
      //           maxzoom: 22,
      //           layout: {
      //             'line-cap': 'round',
      //             'line-join': 'miter',
      //           },
      //           paint: {
      //             'line-dasharray': {
      //               from: [3, 2],
      //               to: [3, 2],
      //             },
      //             'line-color': {
      //               r: 0.7254901960784313,
      //               g: 0.2823529411764706,
      //               b: 0.25882352941176473,
      //               a: 1,
      //             },
      //             'line-width': 2,
      //           },
      //         },
      //         source: 'tileExt_75791dca-3295-4309-8bd9-565e361b2e6f',
      //         sourceLayer: 'psr_201000_0_2_0_0',
      //         state: {},
      //       },
      //     ],
      //     [],
      //     [
      //       {
      //         geometry: {
      //           type: 'LineString',
      //           coordinates: [
      //             [112.58396869059652, 37.82117660634299],
      //             [112.58404274471104, 37.82103829135944],
      //           ],
      //         },
      //         type: 'Feature',
      //         properties: {
      //           ssxl: 693353,
      //           yxdw: '057252DF49B645E6E050007F01007437',
      //           ssdl: 1503504706,
      //           sbzlx: 20100000,
      //           ssdkx: 566177,
      //           georelation: '2,',
      //           sbid: 'R5WUeh3ytYmXd1OJUeWfpk',
      //           state_id: 92186906,
      //           oid: 1503504711,
      //           apptype: 3,
      //           ssds: '057252DF490D45E6E050007F01007437',
      //           bznr: '10kV840二营盘1号线',
      //           zdsblx: 20200000,
      //           qdsb: 1503504701,
      //           zdsb: 1503504703,
      //           qdsblx: 20300000,
      //           dydj: 22,
      //           sbmc:
      //             '10kV二营盘开关站8211煤科1号线-10kV煤科院配电室8181电缆中间接头001-10kV煤科院配电室8181',
      //         },
      //         id: 1503504711,
      //         layer: {
      //           id: 'psr_201000_0_2_0_0',
      //           type: 'line',
      //           source: 'tileExt_75791dca-3295-4309-8bd9-565e361b2e6f',
      //           'source-layer': 'psr_201000_0_2_0_0',
      //           metadata: {
      //             'maputnik:comment': '站外-电缆段',
      //           },
      //           minzoom: 16,
      //           maxzoom: 22,
      //           layout: {
      //             'line-cap': 'round',
      //             'line-join': 'miter',
      //           },
      //           paint: {
      //             'line-dasharray': {
      //               from: [3, 2],
      //               to: [3, 2],
      //             },
      //             'line-color': {
      //               r: 0.7254901960784313,
      //               g: 0.2823529411764706,
      //               b: 0.25882352941176473,
      //               a: 1,
      //             },
      //             'line-width': 2,
      //           },
      //         },
      //         source: 'tileExt_75791dca-3295-4309-8bd9-565e361b2e6f',
      //         sourceLayer: 'psr_201000_0_2_0_0',
      //         state: {},
      //       },
      //     ],
      //   ]
      //   a = a.flat(Infinity)

      const uniqueArray = [...new Set(a.map(JSON.stringify))].map(JSON.parse);

      var list = uniqueArray.filter((it) => {
        return it.length != 0;
      });
      if (forecastSubContent.length == 0 && alarmSubContent.length == 0) {
        return this.$toast({
          message: "订阅要素不能为空",
          position: "center",
        });
      }
      var params = {};
      list.forEach((it) => {
        params = {
          pushSwitch: this.radio3,
          msgType: this.radio,
          forecastSubContent: forecastSubContent,
          alarmSubContent: alarmSubContent,
          subscribeAreas: [
            {
              areasData: [it],
              areaLocation: this.dlweizhi,
            },
          ],

          alarmLevel: this.action,
          userId: this.$store.getters.userid,
          userName: "张星宇",
        };
      });

      for (var key in params) {
        if (key === "pushSwitch" && params[key] === "") {
          this.$toast({
            message: "消息状态不能为空",
            position: "center",
          });
          return;
        } else if (key === "msgType" && params[key] === "") {
          this.$toast({
            message: "订阅类型不能为空",
            position: "center",
          });
          return;
        } else if (key === "subscribeAreas") {
          console.log(params, "hahah");
          const areasData = params.subscribeAreas[0].areasData;
          const areaLocation = params.subscribeAreas[0].areaLocation;
          if (areasData.length === 0) {
            this.$toast({
              message: "订阅位置不能为空",
              position: "center",
            });
            return;
          } else if (areaLocation === "") {
            this.$toast({
              message: "订阅名称不能为空",
              position: "center",
            });
            return;
          }
        }
      }

      Message.editMessage(params)
        .then((res) => {
          if (res.msg == "Operation is Successful") {
            this.$toast({
              message: "提交成功!",
              position: "center",
            });
          }
        })
        .catch((error) => {
          this.$toast({
            message: error,
            position: "center",
          });
          console.log(error);
        });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    var params = getItem("element");
    if (params == null) {
      return;
    }
    if (Object.keys(params).length === 0) {
      return;
    }
    this.radio3 = params.pushSwitch;
    this.radio = params.msgType;

    this.radio1 = params.forecastSubContent;
    this.userName = params.userName;
    this.action = params.alarmLevel;
    this.subscribeAreas = params.subscribeAreas;
    this.dlweizhi = params.areaLocation;

    // this.dlweizhi =
    //   this.$store.getters.location[1].name +
    //   this.$store.getters.location[2].name
    // ;(this.city = this.$store.getters.location[1].name),
    //   (this.cnty = this.$store.getters.location[2].name)
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style type="text/css" lang="less" scoped>
.message {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  .main {
    width: 100%;
    height: 100%;
    padding: 15px;

    .publicColor {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #656b75;
    }
    .user {
      font-size: 15px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 540;
      color: #101010;
    }
    .messageType {
      margin-top: 20px;
    }
    .location {
      margin-top: 20px;
    }
    .btn {
      overflow: hidden;
      display: flex;
    }
    .subscribe {
      margin-top: 20px;
    }
    .subscribeSun {
      margin-top: 8px;
      display: flex;
      justify-content: flex-start; // 靠左对齐
      flex-wrap: wrap; // 换行
      .subscribeYs {
        line-height: 13px;
        margin-right: 20px; // 增加边距
        width: calc(
          (100% - 20px) / 5
        ); // 这个是公式，减去边距以后一行放多少个。
      }
    }
    .Warninglevel {
      margin-top: 20px;
    }

    .locationSun {
      position: relative;
      display: flex;
      justify-content: space-between;

      margin-top: 10px;
      img {
        position: absolute;
        width: 17px;
        height: 17px;
      }
      .img1 {
        top: 40%;
        transform: translate(-50%, -50%);
        z-index: 11;
        left: 12px;
      }
      .img2 {
        right: 130px;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 11;
      }
    }
    /deep/ .van-radio__label {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #656b75;
    }
    /deep/ .van-radio {
      margin-right: 30px;
    }
    /deep/ .van-radio-group {
      width: 200px;
      margin-top: 20px;
    }
    /deep/ .van-checkbox-group {
      width: 200px;
      margin-top: 20px;
    }
    /deep/ .van-checkbox {
      margin-left: 10px;
    }
    /deep/ .van-cell {
      display: flex;
      align-items: center;
      width: 160px;
      height: 34px;
      background: #f5f5f5;
      border-radius: 17px;
    }
    /deep/.van-field__control {
      width: 160px;
      height: 34px;
      background: #f5f5f5;
      border-radius: 17px;
      text-indent: 23px;
    }
    /deep/ .van-field__control::-webkit-input-placeholder {
      font-size: 13px;
      margin-left: 10px;
      font-weight: 400;
      color: #999999;
    }
    /deep/ .van-button {
      width: 90px;
      height: 34px;
      top: -8px;
      background: rgba(3, 120, 255, 0.1);
      border-radius: 17px;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #357cff;
      border: 1px solid #357cff;
    }
    .WarninglevelSun {
      margin-top: 17px;
      /deep/ .van-cell {
        display: flex;
        width: 100%;
        align-items: center;
        font-size: 13px;

        font-weight: 400;
        color: #999999;
        height: 34px;
        background: #f5f5f5;
        border-radius: 17px;
        padding-left: 20px;
      }
      /deep/ .van-icon {
        font-size: 22px;
      }
    }
    .bottom {
      margin: 0 auto;
      margin-top: 40px;

      /deep/ .van-button {
        margin: 0 auto;
        width: 270px;
        height: 40px;
        background: #357cff;
        border-radius: 20px;
        color: #fff;
      }
    }
  }
}
/*@import url(); 引入公共css类*/
</style>
